<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="/system/com/header :: header">

</head>
<body>
<header class="header">
    <nav class="navbar navbar-expand-lg" th:include="/system/com/topBar :: topBar"></nav>
</header>
<div class="d-flex align-items-stretch">
    <!-- Sidebar Navigation-->
    <nav id="sidebar" th:include="/system/com/leftBar :: leftBar"></nav>
    <!-- Sidebar Navigation end-->
    <div class="page-content">
        <!-- Page Header-->
        <div class="page-header no-margin-bottom">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">用户编辑</h2>
            </div>
        </div>
        <!-- Breadcrumb-->
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/sys/}">首页</a></li>
                <li class="breadcrumb-item active"><a th:href="@{/sys/user/id=0}">用户页面</a></li>
                <li class="breadcrumb-item active">用户编辑界面</li>
            </ul>
        </div>
        <section class="no-padding-top">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="block">
                            <div class="title"><strong class="d-block">用户编辑页面</strong><span class="d-block"></span>
                            </div>
                            <div class="block-body">
                                <form class="form-horizontal" th:action="@{/sys/user/save}" method="post" enctype="multipart/form-data">
                                    <div th:each="eo : ${users}">
                                    <input type="hidden" th:value="${eo.userId}" name="userId">
                                    <div class="form-group">
                                        <label>头像</label>
                                        <div>
                                            <img th:src="@{${eo.userImgurl}}" id="imgUrl" onclick="onUserImgFileUp()" style="width: 100px;height: 100px;" class="img-thumbnail">
                                            <input type="file" id="FileButton" hidden="hidden" name="fileName">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>用户名</label>
                                        <input type="text" name="userName" th:value="${eo.userName}"  placeholder="username" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>密码</label>
                                        <div class="input-group">
                                        <input type="password" id="pwd" name="userPassword" th:value="${eo.userPassword}" placeholder="Password" class="form-control">
                                        <div style="background-color: #2d3035;border: 1px solid #444951;width: 50px;text-align: center;line-height: calc(2.4rem + 2px);"><i class="fa fa-eye" onclick="showhide()" id="eye"></i></div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>手机号</label>
                                        <input type="tel"  th:value="${eo.userTel}" name="userTel" placeholder="Tel" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>邮箱</label>
                                        <input type="email"  th:value="${eo.userEmail}" name="userEmail" placeholder="Email" class="form-control">
                                    </div>
                                    <div class="modal-footer">
                                        <button onclick="onSubmitSave()" class="btn btn-primary">修改</button>
                                    </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </section>
        <footer class="footer" th:include="/system/com/footBar :: footBar"></footer>
    </div>
</div>
<script>
    function onSubmitSave() {
        onPostSubmit($("form").attr("action"),$("form").serialize());
    }
    function onUserImgFileUp(){
        let btn = document.getElementById("imgUrl");
        let fileButton = document.getElementById("FileButton");
        btn.onclick = function () {
            fileButton.click();
        }
    }

    let eye = document.getElementById("eye");
    let pwd = document.getElementById("pwd");

    function showhide(){

        if (pwd.type == "password") {
            pwd.type = "text";
            eye.className='fa fa-eye-slash'
        }else {
            pwd.type = "password";
            eye.className='fa fa-eye'
        }
    }
</script>
<!-- JavaScript files-->
<script th:src="@{/system/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/system/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/system/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/system/vendor/jquery.cookie/jquery.cookie.js}"></script>
<script th:src="@{/system/vendor/chart.js/Chart.min.js}"></script>
<script th:src="@{/system/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/system/js/charts-home.js}"></script>
<script th:src="@{/system/js/front.js}"></script>
</body>
</html>